<script setup>
import { useUsersStore } from '@/stores/usersStore';
import { useLoginStore } from '@/stores/loginStore';
import { useRouter } from 'vue-router'
const router = useRouter();
const { state, actions } = useUsersStore();
const loginStore = useLoginStore();
loginStore.actions.loadLogin();
console.log(loginStore.state.login);
actions.loadUsers(loginStore.state.login.uuid, loginStore.state.login.token);
import AddUser from '@/components/AddUser.vue';
const handleSubmit = (data) => {
    actions.addUser(data, loginStore.state.login.uuid, loginStore.state.login.token).then(() => {
        actions.loadUsers(loginStore.state.login.uuid, loginStore.state.login.token);
    });
}
if (!loginStore.state.login.login) {
    router.push('/');
}
const goToTargetRoute = (uuid) => {
    router.push('/user/' + uuid);
}
</script>

<template>
    <div class="users-view">
        <ui>
            <li v-for="user in state.users">
                <a @click="goToTargetRoute(user.uuid)">{{ user.name }}</a>
            </li>
        </ui>
        <AddUser @submit="handleSubmit" />
    </div>
</template>
<style>
.users-view ui {
    list-style: none;
}

.users-view ui li {
    border-bottom: 1px solid #4CAF50;
    font-size: 2rem;
    margin: 2rem;
}
</style>